<nz-card class="m-b-2">
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">订单状态</label>
                <div class="common-search-conrol">
                    <nz-select
                        [(ngModel)]="queryForms.orderStateList"
                        [nzMaxTagCount]="1"
                        nzAllowClear
                        nzShowSearch
                        nzMode="multiple"
                        nzPlaceHolder="全部">
                        <nz-option
                            *ngFor="let status of statusArrys"
                            [nzValue]="status.id"
                            [nzLabel]="status.title">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">订单来源</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择"
                        [(ngModel)]="scurceSelected"
                        (ngModelChange)="orderSourceChange($event)">
                        <nz-option
                            *ngFor="let val of orderSourceOptions"
                            [nzLabel]="val.name"
                            [nzValue]="val.content">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">下单时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker
                        nzInputReadOnly
                        [(ngModel)]="queryForms.orderTimeArr">
                    </nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">付款时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker
                        nzInputReadOnly
                        [(ngModel)]="queryForms.paymentTimeArr">
                    </nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">发货时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker
                        nzInputReadOnly
                        [(ngModel)]="queryForms.shipTimeArr">
                    </nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">完成时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker
                        nzInputReadOnly
                        [(ngModel)]="queryForms.dealTimeArr">
                    </nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">平台</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择平台" [(ngModel)]="queryForms.payType">
                        <nz-option nzLabel="支付宝" [nzValue]="1"></nz-option>
                        <nz-option nzLabel="微信" [nzValue]="2"></nz-option>
                        <nz-option nzLabel="银联" [nzValue]="3"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">货主</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="请选择货主"
                        [(ngModel)]="queryForms.supplierId">
                        <nz-option
                            *ngFor="let option of supplierOptions"
                            [nzLabel]="option.name"
                            [nzValue]="option.id">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">交易流水</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入交易流水"
                        [(ngModel)]="queryForms.payOrderNum"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableForms.tableLoading" (click)="queryTable()">查询</button>
                    <button nz-button nzType="default" (click)="resetTable()">重置</button>
                    <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                        {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position">
    <div class="operation-wrap p-b-10">
        <button
            *ngIf="permission.userPermission.has('finance:gatheringDetail:export')"
            nz-button
            nzType="primary"
            [nzLoading]="exportLoading"
            (click)="exportTable()">
            <i nz-icon nzType="download" nzTheme="outline"></i>
            导出
        </button>
    </div>

    <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1100px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableForms.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableForms.total"
        [nzPageIndex]="tableForms.pageIndex"
        [nzPageSize]="tableForms.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
    >
        <thead>
            <tr>
                <th nzAlign="center" nzWidth="200px" nzLeft>销售订单号</th>
                <th nzAlign="center" nzWidth="160px">订单状态</th>
                <th nzAlign="center" nzWidth="150px">收款状态</th>
                <th nzAlign="center" nzWidth="150px">来源平台</th>
                <th nzAlign="center" nzWidth="180px">下单时间</th>
                <th nzAlign="center" nzWidth="180px">付款时间</th>
                <th nzAlign="center" nzWidth="180px">发货时间</th>
                <th nzAlign="center" nzWidth="180px">完成时间</th>
                <th nzAlign="center" nzWidth="130px">应付金额</th>
                <th nzAlign="center" nzWidth="120px">优惠总额</th>
                <th nzAlign="center" nzWidth="130px">实付金额</th>
                <th nzAlign="center" nzWidth="130px">爱豆抵扣</th>
                <th nzAlign="center" nzWidth="130px">退款金额</th>
                <th nzAlign="center" nzWidth="130px">返还爱豆</th>
                <th nzAlign="center" nzWidth="120px">平台</th>
                <th nzAlign="center" nzWidth="180px">备注</th>
                <th nzAlign="center" nzWidth="180px">货主</th>
                <th nzAlign="center" nzWidth="180px">交易流水</th>
                <th nzAlign="center" nzWidth="120px">子订单数量</th>
                <th nzAlign="center" nzWidth="180px">父订单编号</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of basicTable.data">
                <!-- 销售订单号 -->
                <td nzAlign="center" nzLeft>
                    <a
                        nz-button
                        nzType="link"
                        target="_blank"
                        [disabled]="!data.orderNum"
                        [routerLink]="['/order/accDetails', data.id]">
                        <span class="herf-ah">{{ data.orderNum || '-' }}</span>
                    </a>
                </td>
                <!-- 订单状态 -->
                <td nzAlign="center">
                    <span [ngStyle]="{'color': data.status | orderColorStatus}">
                        {{ data.status | orderStatus }}
                    </span>
                </td>
                <!-- 收款状态 -->
                <td nzAlign="center">{{ data.refundState | collectionStatus }}</td>
                <!-- 来源平台 -->
                <td nzAlign="center">{{ dictTextFilter(data.sourceType, orderSourceOptions) }}</td>
                <!-- 下单时间 -->
                <td nzAlign="center">{{ data.createTime || '-' }}</td>
                <!-- 付款时间 -->
                <td nzAlign="center">{{ data.payTime || '-' }}</td>
                <!-- 发货时间 -->
                <td nzAlign="center">{{ data.shipTime || '-' }}</td>
                <!-- 完成时间 -->
                <td nzAlign="center">{{ data.dealTime || '-' }}</td>
                <!-- 应付金额 -->
                <td nzAlign="center">{{ data.totalPrice || '-' }}</td>
                <!-- 优惠总额 -->
                <td nzAlign="center">{{ data.favorablePrice || '-' }}</td>
                <!-- 实付金额 -->
                <td nzAlign="center">{{ data.realPrice || '-' }}</td>
                <!-- 爱豆抵扣 -->
                <td nzAlign="center">{{ data.aiDouAmount || '0' }}</td>
                <!-- 退款金额 -->
                <td nzAlign="center">
                    <button
                        nz-button
                        nzType="link"
                        [disabled]="!data.refundPrice"
                        (click)="showModal(data.orderNum )">
                        <span class="herf-ah">{{ data.refundPrice || '-' }}</span>
                    </button>
                </td>
                <!-- 返还爱豆 -->
                <td nzAlign="center">{{ data.refundAiDouAmount || '0' }}</td>
                <!-- 平台 -->
                <td nzAlign="center">{{ data.payType | platformStatus }}</td>
                <!-- 备注 -->
                <td nzAlign="center">{{ data.note || '-' }}</td>
                <!-- 货主 -->
                <td nzAlign="center">{{ data.supplierName || '-' }}</td>
                <!-- 交易流水 -->
                <td nzAlign="center">{{ data.payOrderNum || '-' }}</td>
                <!-- 子订单数量 -->
                <td nzAlign="center">{{ data.childCount || '0' }}</td>
                <!-- 父订单编号 -->
                <td nzAlign="center">{{ data.parentOrderNum || '-' }}</td>
            </tr>
        </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
</nz-card>

<!-- model START -->
<nz-modal
    [nzWidth]="1000"
    [(nzVisible)]="isVisible"
    [nzTitle]="modelTitle"
    [nzFooter]="null"
    (nzOnOk)="handleOk()"
    (nzOnCancel)="handleCancel()">

    <ng-container *nzModalContent>
        <nz-table
            #modelTable
            nzSize="small"
            nzBordered
            [nzData]="modelTableData"
            [nzFrontPagination]="false">
            <thead>
                <tr>
                    <th [width]="210" nzAlign="center">售后单号</th>
                    <th [width]="100" nzAlign="center">售后状态</th>
                    <th [width]="100" nzAlign="center">售后方式</th>
                    <th [width]="100" nzAlign="center">退款金额</th>
                    <th [width]="100" nzAlign="center">返还爱豆</th>
                    <th [width]="180" nzAlign="center">申请时间</th>
                    <th [width]="180" nzAlign="center">退款时间</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of modelTable.data">
                    <!-- 售后单号 -->
                    <td nzAlign="center">
                        <a
                            nz-button
                            nz-button-tdlink
                            nzType="link"
                            target="_blank"
                            [disabled]="!data.returnNum"
                            [routerLink]="['/service/saleDetails', data.id]">
                            <span class="herf-ah">{{ data.returnNum || '-' }}</span>
                        </a>
                    </td>
                    <!-- 售后状态 -->
                    <td nzAlign="center">{{ data.status | saleStatus }}</td>
                    <!-- 售后方式 -->
                    <td nzAlign="center">{{ data.type | saleTypeStatus }}</td>
                    <!-- 退款金额 -->
                    <td nzAlign="center">{{ data.refundPrice || '-' }}</td>
                    <!-- 返还爱豆 -->
                    <td nzAlign="center">{{ data.refundAiDouAmount || '0' }}</td>
                    <!-- 申请时间 -->
                    <td nzAlign="center">{{ data.createTime || '-' }}</td>
                    <!-- 退款时间 -->
                    <td nzAlign="center">{{ data.refundTime || '-' }}</td>
                </tr>
            </tbody>
        </nz-table>
    </ng-container>

</nz-modal>
<!-- model END -->
